import React from 'react'
import { useState } from 'react';

export default function App() {
    const [text,setText] = useState("")
    const [mylist,setList] = useState(["haha","hehe"])
    

    const valueChange = (event)=>{
        console.log(event.target.value);

        setText(event.target.value)
    }
    const handleClick = ()=>{
        setList([...mylist,text])
        setText("")
    }
    const deleteClick = (index)=>{
        console.log("删除了",index);
        var newList = [...mylist];
        newList.splice(index,1);
        setList(newList)
    }
  return (
    <div>
        <input onChange={valueChange} value={text}/>
        <button onClick={handleClick}>添加</button>
        <ul>
            { 
                mylist.map((item,index) => {
                    return <li key={item}>{item}<button onClick={()=>deleteClick(index)}>delete</button></li>
                })
            }
        </ul>
    </div>
  )
}
